<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
  <base th:href="${#request.getContextPath()}+'/'">
  <style>
    .tip{
      color: red;
      font-size: 12px;
    }
  </style>
<title></title>
  <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}" />
  <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("ul.typeul .typeone").click(function()
	{
		var arrow = $(this).find("span.arrow");
		if(arrow.hasClass("up"))
		{
			arrow.removeClass("up");
			arrow.addClass("down");
		}
		else if(arrow.hasClass("down"))
		{
			arrow.removeClass("down");
			arrow.addClass("up");
		}
		$(this).parent().find(".typetwo").slideToggle();
	});
})
//轮播图
function banner(){
  var n=0;
  var imgLength=$(".b-img img").length;
  var ctWidth=imgLength*100;
  var itemWidth=1/imgLength*100;
  $(".b-img").width(ctWidth+"%");
  $(".b-img img").width(itemWidth+"%");
  $(".banner").height($(".b-img img:eq(0)")[0].height+"px");

  $(".b-list").width(imgLength*30);

  $(".b-list").css('padding-top',$(".b-img img:eq(0)")[0].height-20);

  if(imgLength>1)
  {
    for(var i=0;i<imgLength;i++)
    {
      var listSpan=$("<span></span>")
      $(".b-list").append(listSpan);
    }
  }
  $(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
  $(".bar-right em").click(function(){
    if(n==imgLength-1)
    {
      var ctPosit=(n+1)*100;
      $(".banner").append($(".b-img").clone());
      $(".b-img:last").css("left","100%");
      $(".b-img:first").animate({"left":"-"+ctPosit+"%"},1000);
      $(".b-img:last").animate({"left":"0"},1000);
      var setTime0=setTimeout(function () {
        $(".banner .b-img:first").remove();
      }, 1000);
      n=0;
      $(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
    }
    else
    {
      n++;
      var ctPosit=n*100;
      $(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
      $(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
    }
  })
  $(".bar-left em").click(function(){
    if(n==0)
    {
      var stPosit=imgLength*100;
      var etPosit=(imgLength-1)*100;
      $(".banner").prepend($(".b-img").clone());
      $(".b-img:first").css("left","-"+stPosit+"%");
      $(".b-img:last").animate({"left":"100%"},1000);
      $(".b-img:first").animate({"left":"-"+etPosit+"%"},1000);
      var setTime0=setTimeout(function () {
        $(".banner .b-img:last").remove();
      }, 1000);
      n=imgLength-1;
      $(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
    }
    else
    {
      n--;
      var ctPosit=n*100;
      $(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
      $(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
    }
  })
  $(".b-list span").click(function(){
    var lsIndex=$(this).index();
    n=lsIndex;
    var ctPosit=n*100;
    $(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
    $(this).addClass("spcss").siblings("span").removeClass("spcss");
  })
  function rollEnvent(){
    if(n==imgLength-1)
    {
      var ctPosit=(n+1)*100;
      $(".banner").append($(".b-img").clone());
      $(".b-img:last").css("left","100%");
      $(".b-img:first").animate({"left":"-"+ctPosit+"%"},1000);
      $(".b-img:last").animate({"left":"0"},1000);
      var setTime0=setTimeout(function () {
        $(".banner .b-img:first").remove();
      }, 1000);
      n=0;
      $(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
    }
    else
    {
      n++;
      var ctPosit=n*100;
      $(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
      $(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
    }
  }
  var slidesetInterval=setInterval(rollEnvent,4000);
  $(".banner").hover(function(){clearInterval(slidesetInterval);},function(){slidesetInterval=setInterval(rollEnvent,4000);});
}

//页面加载时就调用
window.onload=function () {
  banner();
  //获取用户名错误提示span标签
  var usernameErrorSpan = document.getElementById("usernameError");
  //给用户名绑定blur事件
  var usernameElt = document.getElementById("username");
  //usernameElt.onblur =
  function checkUsername() {
    var username = usernameElt.value;
    username = username.trim();
    if (username === "") {
      usernameErrorSpan.innerText = "用户名不能为空";
      return false;
    } else {
      //用户名不为空
      //username不为空,继续判断长度【6-14】
      if (username.length < 3 || username.length > 14) {
        //用户名长度是否合法
        usernameErrorSpan.innerHTML = "用户名长度不合法"
        return false;
      } else {
        //用户名长度合法
        //用户名是否有非法字符出现
        var reqExp = /^[A-Za-z0-9]+$/;
        var ok = reqExp.test(username);
        if (ok) {
          //用户名最终合法
          usernameErrorSpan.innerText="";
        } else {
          //用户名最终不合法
          usernameErrorSpan.innerText = "用户名格式不合法";
          return false;
        }
      }
    }
    return true;
  }
  //给username这个文本框绑定焦点事件
  usernameElt.onfocus=function (){
    if(usernameErrorSpan.innerText!=""){
      usernameElt.value=""
    }
    usernameErrorSpan.innerText="";
  }


  //获取内容错误提示span标签
  var contentErrorSpan = document.getElementById("contentError");
  //给内容绑定blur事件
  var contentElt = document.getElementById("content");
  /*contentElt.onblur = */
  function checkContent() {
    var content = contentElt.value;
    content = content.trim();
    if (content === "") {
      contentErrorSpan.innerText = "内容不能为空";
      return false;
    } else {
      contentErrorSpan.innerText="";
    }
    return true;
  }
  //给content这个文本框绑定焦点事件
  contentElt.onfocus=function (){
    if(contentErrorSpan.innerText!=""){
      contentElt.value=""
    }
    contentErrorSpan.innerText="";
  }



  //获取手机号错误提示span标签
  var phoneErrorSpan = document.getElementById("phoneError");
  //给手机号绑定blur事件
  var phoneElt = document.getElementById("phone");
  /*phoneElt.onblur = y*/
  function checkPhone() {
    var phone = phoneElt.value;
    phone = phone.trim();
    if (phone === "") {
      phoneErrorSpan.innerText = "手机号不能为空";
      return false;
    } else {
      //phone不为空,继续判断长度是否为11位
      if (phone.length !=11) {
        //用户名长度是否合法
        phoneErrorSpan.innerHTML = "手机号长度必须位11位";
        return false;
      } else {
        //手机号长度合法
        //手机号是否有非法字符出现
        var reqExp = /^[1][3,4,5,7,8][0-9]{9}$/;
        var ok = reqExp.test(phone);
        if (ok) {
          //手机号最终合法
          phoneErrorSpan.innerText="";
        } else {
          //手机号最终不合法
          phoneErrorSpan.innerText = "手机号须数字组成";
          return false;
        }
      }
    }
    return true;
  }
  //给username这个文本框绑定焦点事件
  phoneElt.onfocus=
          function (){
            if(phoneErrorSpan.innerText!=""){
              phoneElt.value=""
            }
            phoneErrorSpan.innerText="";
          }



  $(function () {
    //1.给登录按钮绑定单击事件
    $("#btn_sub").click(function () {
      if(checkUsername()&&checkContent()&&checkPhone()){

        //2.发送ajax请求，提交表单数据
        $.post("simple/leave_message",$("#leaveMessageForm").serialize(),function (data) {
          //data : {flag:false,errorMsg:''}
          if(data){
            //登录成功
            alert("感谢您的留言!")
          }else{
            //登录失败
            alert("留言失败！");
          }
        });
      }else{
        alert("请检查您输入的信息是否规范！");
      }
    });

  });




}
</script>
</head>

<body>
<div class="header">
  <div class="main">
    <img src="images/logo2021.png" />
  </div>
</div>
<div class="clear"></div>
<div class="nav1">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="jump/auction">拍卖展示</a></li>
    <li><a href="jump/lot">拍卖文物</a></li>
    <li><a href="jump/about">关于我们</a></li>
    <li><a href="jump/product">产品展示</a></li>
    <li><a href="jump/news">行业动态</a></li>
    <li><a href="jump/book">我要留言</a></li>
    <li><a href="jump/contact">联系我们</a></li>
  </ul>
</div>
<div class="clear"></div>
<div class="banner">
  <div class="b-img">
    <div  th:each="carouse:${session.carouse}">
      <img th:src="@{${carouse.getImg()}}" width="100%"/>
    </div>
  </div>
  <div class="clear"></div>
  <div class="b-list"> </div>
</div>
<div class="clear"></div>
<div class="main">
  <div class="mainL">
    <div class="titbox">热门资讯</div>
    <ul class="newsul">
      <li th:each="news:${session.PopularConsultation}">
        <a th:href="'jump/detail?id='+${news.getId()}" class="ccsl" th:text="${news.getTitle()}">热门咨询</a>
    </ul>
    <div class="titbox">联系我们</div>
    <div class="lxwm">
      <div class="con">
        手 机：123456789<br />
        电 话：987654321<br />
        邮箱：123123@qq.com<br />
        地 址：海南省海口市海南师范大学
      </div>
    </div>
  </div>
  <div class="mainR">
    <div class="brandnavbox">
      <h2>我要留言</h2>
      <div class="con">当前位置：首页》我要留言</div>
    </div>
    <div class="detailbox">
      <div class="xq">
        <div class="formBox">
          <form id="leaveMessageForm" action="">
            <div class="inputbox">
              <label><span>*</span>姓名</label>
              <input name="lname" type="text" id="username" placeholder="请输入姓名"/>
              <span id="usernameError" class="tip" style="float: left"></span>
            </div>
            <div class="inputbox2">
              <label><span>*</span>内容</label>
              <textarea name="content" id="content" cols="" rows="" placeholder="请输入您要留言的内容"></textarea>
              <span id="contentError" class="tip"></span>
            </div>
            <div class="inputbox">
              <label><span>*</span>手机号</label>
              <input name="phone" id="phone" type="text"  placeholder="请输入手机号"/>
              <span id="phoneError" class="tip"></span>
            </div>
            <div class="inputbox">
              <label></label>
              <input id="btn_sub" type="button" value="提交" class="btn1"/>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="footerBox">
  <div class="main">
    <div class="footL">
      <div class="tit">联系我们</div>
      <ul>
        <li class="f1">手 机：12345678910</li>
        <li class="f2">电 话：123456789</li>
        <li class="f3">邮箱：123123@qq.com</li>
        <li class="f4">地 址：海南省师范大学
      </ul>
    </div>
    <div class="footR">
      <div class="telbox">
        <div class="tel">
          <span>12345678910</span>
          <b><p>欢迎来电咨询</p></b>
        </div>
      </div>
      <div class="footer">
        <div><br />联系方式：12345678910<br />地 址：海南省师范大学
        </div>
      </div>
    </div>
  </div>
<div class="clear"></div>
<div class="fnav">
  <div class="main">
    <a href="/index.html">首页</a>
    <a href="about.html">关于我们</a>
    <a href="/product.html">产品展示</a>
    <a href="/news.html">行业动态</a>
    <a href="book.html">我要留言</a>
    <a href="/contact.html">联系我们</a>
  </div>
</div>
</body>
</html>